<template>
    <div :form="form" :reset-btn="resetBtn" :default-value="defaultValue">
        <Modal
                v-model="visible"
                :title="title"
                @on-ok="handleForm"
                @on-cancel="visible = false"
                :footer-hide="isModelFootHide"
        >
            <slot name="extFormHeaderContent">
                <!--额外字段插槽-->
            </slot>
            
            <xy-form v-if="visible" :form-json="rule" ref="fc" ref-name="fc" :option="option"></xy-form>
            <div class="form-bottom" v-if="isShowBottomBtn">
                <Button @click="visible = false">取消</Button>
                <Button type="primary" @click="handleForm">确认</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {mapState, mapActions} from 'vuex';
    import {deepCopy} from "../utils/helpers";
    //import {handleFormRule} from 'xinya-form';

    export default {
        name: "FormField",
        props: {
            form: null,
            resetBtn: {
                type: Boolean,
                default: false
            },
            defaultValue: {
                type: Object,
                default: function () {
                    return {};
                }
            },
            showConfirm: {
                type: Boolean,
                default: true
            },
            title: {
                type: String,
                default: '表单'
            },
            isShowBottomBtn: {//是否展示底部按钮
                type   : Boolean,
                default: true
            },
            detailFieldFilter: {//详情表单打开时过滤详情表单不展示字段，字段属性 props.display_detail = 0 才不展示在详情表单
                type   : Boolean,
                default: false,
            },
        },
        computed: {
            ...mapState({
                formRepository: state => state.form.formRepository,
                formFieldRepository: state => state.form.formFieldRepository,
                token: state => state.auth.login_token
            }),
        },
        methods: {
            ...mapActions('form', ['loadForm']),
            handleForm() {
                let that = this;
                this.$refs.fc.fApi.submit(formData => {
                    that.$emit('on-form-submit', formData);
                });
            },
            setCustomFieldProps() {
                this.$emit('before-open', (props) => {
                    this.customFieldProps = props;
                })
            },
	        setUploadHeader() {
		        let props = this.customFieldProps;
		        if (props[0] !== undefined) {
			        this.$refs.fc.setFieldProps(props);
		        }
	        },
            openForm() {
                if (this.defaultValue[0] === undefined) {
                    this.rule = this.filterDisplayCreate(deepCopy(this.formFieldRepository[this.form]));
                }
                this.visible = true;

                this.setSpecialHeader();
            },
            setSpecialHeader() {
	            //设置特殊字段头部，比如图片上传
	            this.$nextTick(() => {
		            this.setCustomFieldProps();
		            this.setUploadHeader();
	            })
            },
            filterDisplayCreate(form) {
                form.fields = form.fields.filter(value => {
                    return (value.props.display_create === undefined) || (value.display == 1 && value.props.display_create == 1);
                });

                return form;
            },
            filterDisplayEdit(form) {
                if (this.showConfirm) {
                    form.fields = form.fields.filter(value => {
                        return (value.props.display_edit === undefined) || (value.display == 1 && value.props.display_edit == 1);
                    });
                }
    
                //【详情】查看时不展示的字段显示
                if(this.detailFieldFilter){
                    form.fields = form.fields.filter(value => {
                        return (value.props.display_detail === undefined) || (value.display == 1 && value.props.display_detail == 1);
                    });
                }

                return form;
            },
            formatDefaultValue(formData) {
                let b = [];
                if (this.defaultValue !== {}) {
                    formData.fields.forEach((value, index) => {
                        let c = value;
                        if (this.defaultValue[value.field_name] !== undefined) {
                            c.props.default_value = this.defaultValue[value.field_name];
                        }
                        b[index] = c;
                    });
                } else {
                    b = formData.fields;
                }
                formData.fields = b;
                return formData;
            },
            formatFormData() {
                this.rule = this.filterDisplayEdit(this.formatDefaultValue(deepCopy(this.formFieldRepository[this.form])));
            },
        },
        watch: {
            defaultValue: {
                handler: function (value) {
                    this.formatFormData();
                },
                deep: false
            },
            visible: {
                handler: function (newVal) {
                    if (newVal) {
                        // this.setCustomFieldProps();
                        // this.setUploadHeader();
                    }
                },
                deep   : false
            }
        },
        data() {
            return {
                visible: false,
                formData: {},
                fApi: {},
                rule: {},
                option: {
                    //显示表单重置按钮
                    resetBtn: false,
                    //表单提交事件
                    submitBtn: false,
                },
                customFieldProps: [],
                isModelFootHide:true,
            }
        },
        created() {
        }
    }
</script>

<style scoped>
    .form-bottom {
        text-align: center;
    }
    .form-bottom button{
        margin-right: 10px;
    }
</style>